<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酒店 首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="index-header">
        <div class="index-center">
            <div class="header-logo">
                <p class="logo-name">CESLAVIE</p>
                <hr>
                <p class="logo-hotels">HOTELS</p>
            </div>
            <ul class="header-nav">
                <li onclick="window.location.href='index.html';">首页</li>
                <li onclick="window.location.href='hotel-profile.html';">关于我们</li>
                <li onclick="window.location.href='news-center.html';">新闻中心</li>
                <li style="color: #fff;background-color: #1a5de6;">客房预订</li>
                <li onclick="window.location.href='contact-us.html';">联系我们</li>
                <li onclick="window.location.href='merchants-join.html';">招商联盟</li>
            </ul>
        </div>
    </div>
    <div class="res-banner"></div>
    <div class="res-content">
        <div class="res-center">
            <div class="res-header">
                <img src="./images/rectangle.png" alt="">
                <h3>客房预订</h3>
            </div>
            <div class="res-nav">
                <span>首页</span><span>></span><span>客房预订</span><span>></span><span class="res-change-text">推荐房型</span>
            </div>
            <!-- 客房预订 tab切换 -->
            <div id="res-tab" class="res-tab">
                    <div class="res-list">
                        <ul>
                            <li class="resli cur">推荐房型</li>
                            <li class="resli">在线预定</li>
                        </ul>
                    </div>
                    <div id="resCon"> 
                        <div class="resCon cur">
                            <!-- 推荐房型 -->
                            <ul>
                                <li style="margin-left: 0;">
                                    <img src="./images/res-img1.png" alt="">
                                    <h3>温馨大床房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                                <li>
                                    <img src="./images/res-img2.png" alt="">
                                    <h3>两床标准房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                                <li>
                                    <img src="./images/res-img3.png" alt="">
                                    <h3>无敌景观房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                                <li style="margin-left: 0;">
                                    <img src="./images/res-img4.png" alt="">
                                    <h3>家庭套房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                                <li>
                                    <img src="./images/res-img5.png" alt="">
                                    <h3>至尊大床房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                                <li>
                                    <img src="./images/res-img6.png" alt="">
                                    <h3>至尊套房</h3>
                                    <p>一个茶室和带淋浴设施的私人浴室。酒店最豪华的房间，无论是家具还是艺术摆件都精益求进。一个茶室...</p>
                                    <a href="javascript:;">MORE+</a>
                                </li>
                            </ul>
                       </div>                       
                        <div class="resCon">
                           <!-- 在线预定  -->
                        <form>
                            <p class="homeType">房间类型</p>
                            <input class="resRadio" type="radio" name="homeType" value="豪华双人间">豪华双人间
                            <input class="resRadio" type="radio" name="homeType" value="豪华单人间">豪华单人间
                            <input class="resRadio" type="radio" name="homeType" value="标准双人间" checked>标准双人间
                            <input class="resRadio" type="radio" name="homeType" value="标准单人间">标准单人间
                            <input class="resRadio" type="radio" name="homeType" value="特价房">特价房
                            <input class="resRadio" type="radio" name="homeType" value="钟点房">钟点房
                            <p class="resHalfConp">入住时间<span>*</span></p>
                            <p class="resHalfConp" style="margin-left: 34px;">退房时间<span>*</span></p>
                            <input class="resHalfText" type="text" required="required" name="checkInTime">
                            <input class="resHalfText" style="margin-left: 34px;" type="text" required="required" name="checkOutTime">
                            <p class="resConp">预订人<span>*</span></p>
                            <input class="resText" type="text" required="required" name="checkUser">
                            <p class="resConp">身份证/军人证/老年证（证件号）<span>*</span></p>
                            <input class="resText" type="text" required="required" name="UserId">
                            <p class="resConp">手机号<span>*</span></p>
                            <input class="resText" type="text" required="required" name="Telephone">
                            <p class="resConp">备注</p>
                            <textarea class="restextarea"  rows="4"></textarea>
                            <input type="submit" class="resSubmit" value="提交">
                        </form> 
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="index-footer">
        <div class="index-center">
            <ul class="footer-intro">
                <li>
                    <p><a href="hotel-profile.html">关于我们</a></p>
                    <span><a href="javascript:;">公司简介</a></span>
                    <span><a href="javascript:;">发展历程</a></span>
                    <span><a href="javascript:;">招贤纳士</a></span>
                </li>
                <li>
                    <p><a href="news-center.html">新闻中心</a></p>
                    <span><a href="javascript:;">新闻资讯</a></span>
                    <span><a href="javascript:;">行业新闻</a></span>
                    <span><a href="javascript:;">酒店新闻</a></span>
                </li>
                <li>
                    <p><a href="contact-us.html">联系我们</a></p>
                    <span><a href="javascript:;">电话地址</a></span>
                    <span><a href="javascript:;">邮箱传真</a></span>
                    <span></span> 
                </li>
                <li style="margin-right: 0;">
                    <p><a href="merchants-join.html">招商联盟</a></p>
                    <span><a href="javascript:;">加盟流程</a></span>
                    <span><a href="javascript:;">加盟优势</a></span>
                    <span></span>
                </li>
            </ul>
        </div>
        <div class="footer-copyright"><span>版权公©1995-2017赛维集团控股酒店上海外滩十八号。版权所有</span></div>
    </div>

    <script src="./js/swiper.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        // tab切换
        window.onload = function(){
			var oDiv = document.getElementById("res-tab");
			var lis = oDiv.getElementsByClassName("resli");
            var oDivCon = document.getElementById("resCon");
            var lisDiv = oDivCon.getElementsByClassName("resCon");
            // var changeText = document.getElementsByClassName("res-change-text"); 			
            for(var i=0;i<lis.length;i++){
				lis[i].index = i;
				lis[i].onclick = function(){
                    show(this.index);
                    $(".res-change-text").text($(this).text());
                }
			}
			function show(a){
				for(var j=0;j<lis.length;j++){
					lis[j].className = "resli";
					lisDiv[j].className = "resCon";					
				}
				lis[a].className = "resli cur";
				lisDiv[a].className = "resCon cur";
			}
        }
    </script>

</body>
</html>